<template>
  <div id="FormControls" >
    <el-form :model="form" :rules="rules" ref="ruleFormRef" label-width="120px" label-position="top" :validate-on-rule-change="false" :disabled="disabled">
      <template v-for="(data, index) in formList">
        <div class="moveFormModel" :class='[clickIndex === index ? "clickOne" : ""]' @click="setIndexModel(index)">
          <el-form-item :prop='data.required ? data.valueName : null' :label='data.name'>
            <component :is="comList[data.componentName]" :formData="data"></component>
          </el-form-item>
          <div class="delOne" @click.stop="deleteOneForm(index)">
            <el-icon>
              <Close />
            </el-icon>
          </div>
          <div class="topOne" v-if="index !== 0" @click.stop="uploadOne(data, index)">
            <el-icon><Top /></el-icon>
          </div>
          <div class="bottomOne" v-if="index !== formList.length - 1" @click.stop="downOne(data, index)">
            <el-icon><Bottom /></el-icon>
          </div>
        </div>
      </template>
    </el-form>
  </div>
</template>

<script setup name="FormControls">
import { reactive, ref, watch, defineEmits } from 'vue'
import comList from './importChild'
//
const form = ref({})
const formModelList = reactive([])
// const ruleFormRef = ref<FormInstance>()
const props = defineProps({
  formList: {
    type: Array,
    default: () => [],
    required: true
  },
  clickIndex: {
    type: Number,
    default: 0
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const rules = reactive({})
const emits = defineEmits(['handleNodeClick'])
function setIndexModel (index) {
  if (props.disabled) return
  emits('gatewayData', index)
}

function deleteOneForm (index) {
  if (props.disabled) return
  props.formList.splice(index, 1)
}

function uploadOne(data, index) {
  if (props.disabled) return
  const nData = data
  props.formList.splice(index, 1)
  props.formList.splice(index - 1, 0, nData)
}

function downOne(data, index) {
  if (props.disabled) return
  const nData = data
  props.formList.splice(index, 1)
  props.formList.splice(index + 1, 0, nData)
}

watch(props, (newProps, oldProps) => {
  console.log(props.formList)
  props.formList.forEach(item => {
    form.value[item.valueName] = item[item.valueName]
    form.value[item.valueName] = item[item.valueName]
    if (item.required) {
      rules[item.valueName] = [
        { required: item.required, message: `请输入${item.name}`, trigger: item.trigger }
      ]
    }
  })
})

</script>

<style scoped lang="scss">
.moveFormModel {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 10px;
  cursor: move;
  position: relative;
  border: 1px dashed #dddddd;

  &:hover {
    .delOne {
      display: block;
    }

    .topOne {
      display: block;
    }

    .bottomOne {
      display: block;
    }
  }
}

.topOne {
  width: 22px;
  height: 22px;
  right:70px;
  top: 0;
  display: none;
  font-size: 16px;
  text-align: center;
  line-height: 22px;
  z-index: 90;
  color: #FFFFFF;
  cursor: pointer;
  position: absolute;
  background-color: #00A1A1;
  border-color: #00A1A1;
}

.bottomOne {
  width: 22px;
  height: 22px;
  right: 40px;
  top: 0;
  display: none;
  font-size: 16px;
  text-align: center;
  line-height: 22px;
  z-index: 90;
  color: #FFFFFF;
  cursor: pointer;
  position: absolute;
  background-color: #00A1A1;
  border-color: #00A1A1;
}

.delOne {
  width: 22px;
  height: 22px;
  right: 10px;
  top: 0;
  display: none;
  font-size: 16px;
  text-align: center;
  line-height: 22px;
  z-index: 90;
  color: #FFFFFF;
  cursor: pointer;
  position: absolute;
  background-color: #F56C6C;
  border-color: #F56C6C;
}

.clickOne {
  background-color: #FFF2DD;
}
::v-deep.moveFormModel>.el-form-item>.el-form-item__content{
  display: block;
}
</style>
